<!--系统主页-->
<template>
    <div>
        <div style="display: flex;align-items: center;justify-content: center; box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px;border-radius: 5px; margin-bottom: 10px">
            欢迎 {{ user.username }} 来到系统~ 祝你开心每一天！
        </div>
        <div style="display: flex; margin: 10px 0">
            <el-card style="width: 45%">
                <div style="margin-bottom: 15px; font-size: 24px; font-weight: bold">系统公告</div>
                <el-collapse v-model="activeName" accordion>
                    <el-collapse-item v-for="(item, index) in notices" :key="item.id"
                                      :name="index + ''">
                        <template>
                            <h5 slot="title" style="font-size: 14px">
                                {{ item.title }}
                            </h5>
                        </template>
                        <div style="margin-top: 5px; font-size: 14px">{{ item.content }}</div>
                        <div style="margin-top: 8px; margin-left: 330px">发布时间：{{ item.time }}</div>
                    </el-collapse-item>
                </el-collapse>
            </el-card>
            <el-card style="width: 55%; margin-left: 10px">
                <div>
                    <el-row :gutter="12">
                        <el-col :span="24" style="margin: 5px 0">
                            <el-card>
                                <div style="width: 100%; height: 400px" id="barNews"></div>
                            </el-card>
                        </el-col>
                        <el-col :span="24">
                            <el-card>
                                <div style="width: 100%; height: 400px" id="barPeople"></div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
        </div>

    </div>
</template>

<script>
    import * as echarts from 'echarts'

    const option = {
        title: {
            text: '用户角色'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'目前人数',
                data: [],
                type: 'bar',
                smooth: true
            }
        ]
    };

    // const option1 = {
    //     title: {
    //         text: '各类竞赛报名总人数'
    //     },
    //     tooltip: {
    //         trigger: 'axis'
    //     },
    //     xAxis: {
    //         type: 'category',
    //         data: []
    //     },
    //     yAxis: {
    //         type: 'value'
    //     },
    //     series: [
    //         {
    //             name:'总人数',
    //             data: [],
    //             type: 'bar',
    //             smooth: true
    //         },
    //     ]
    // };

    const option2 = {
        title: {
            text: '竞赛分类比例图',
            subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '报名总人数',
                type: 'pie',
                radius: '50%',
                label: {//显示百分比
                    show: true,
                    formatter(param){
                        return param.name + '(' + param.percent + '%)'
                    }
                },
                data: [],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }


    export default {
        name: "Home",
        data() {
            return {
                users: [],
                user: JSON.parse(localStorage.getItem('honey-user') || '{}'),//获取token
                url: '',
                urls: [],
                notices: [],
                activeName: '0'
            }
        },
        created() {
            this.loadNotice()
        },
        mounted() { //等待页面的元素全部加载完成后再初始化
            //柱状图
            let barPeopleChart = echarts.init(document.getElementById("barPeople"));
            //饼图
            let pieChart = echarts.init(document.getElementById("barNews"));

            this.$request.get('/charts').then(res => {
                //柱状
                option.xAxis.data = res.data?.userBar?.map(v => v.role) || []
                option.series[0].data = res.data?.userBar?.map(v => v.value) || []
                barPeopleChart.setOption(option)
                //饼图
                option2.series[0].data = res.data?.signBar || []
                pieChart.setOption(option2)
            })
        },
        methods: {
            loadNotice() {
                this.$request.get('/notice/selectUserData').then(res => {
                    this.notices = res.data
                })
            },
        }
    }

</script>

<style>
    .intro-text {
        word-break: break-all;
        word-wrap: break-word;
    }
</style>